<template>
  <el-dialog title="添加主播到项目" :visible.sync="dialogVisible" @close="close" :append-to-body="true">
    <el-form label-width="100px" :model="form" :rules="rules" ref="addAnchor">
      <el-form-item label="主播" prop="anchor">
        <project_search_anchor placeholder="名称 / 房间号"
                               v-model="form.anchor" ref="searchAnchorInput"/>
      </el-form-item>
      <el-form-item label="直播时间" prop="time">
        <el-date-picker v-model="form.time" type="datetimerange"/>
      </el-form-item>
      <el-form-item label="截图间隔" prop="loop">
        <el-input-number v-model="form.loop"/>
        分钟（最少为1）
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">添加</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import Project_search_anchor from './project_search_anchor';

  export default {
    components: {Project_search_anchor},
    name: 'project_add_anchor_schedule',
    props: {project: Object, visible: Boolean, add: Function},
    data() {
      return {
        loading: false,
        dialogVisible: false,
        mode: 'new',
        form: {anchor: null, time: null, start: null, end: null, loop: 2},
        rules: {
          anchor: [{required: true, message: '请选择主播', trigger: 'blur'}],
          time: [{required: true, message: '请选择直播时间', trigger: 'blur'}],
          loop: [{required: true, type: 'number', min: 1, message: '请设定截图间隔', trigger: 'blur'}],
        },
      };
    },
    methods: {
      openWithAnchor(anchor) {
        console.log('openWithAnchor', anchor);
        this.form.anchor = anchor;
        this.$nextTick(() => {
          this.$refs['searchAnchorInput'].setDefaultValue(anchor);
          this.mode = '';
        });
        this.__open();
      },
      open() {
        this.mode = 'new';
        this.form.anchor = null;
        this.__open();
      },
      __open() {
        this.dialogVisible = true;
        this.$emit('update:visible', true);
      },
      close() {
        console.log('dialog close');
        this.$emit('update:visible', false);
        this.$refs.addAnchor.resetFields();
        this.$refs['searchAnchorInput'].clear();
        Object.assign(this.$data, this.$options.data());
      },
      async submit() {
        const valid = await new Promise(resolve => {
          this.$refs['addAnchor'].validate(valid => {
            resolve(valid);
          });
        });

        if (!valid)
          return;

        this.form.start = this.form.time[0];
        this.form.end = this.form.time[1];
        this.loading = true;
        const res = await this.$asyncHttp.post('/api/schedule/',
            Object.assign({project_id: this.project.id}, this.form));
        this.loading = false;
        if (res instanceof Error)
          return this.$alert(res.message, {type: 'error'});
        this.$emit('add', res.data);
        this.close();
      },
    },
    watch: {
      visible(val) {
        if (val && !this.dialogVisible)
          this.open();
        else if (!val && this.dialogVisible)
          this.close();
      },
    },
  };
</script>

<style scoped>

</style>